<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy Code Example with Prism.js</title>
    <link rel="stylesheet" href="./prism.css">
    <script defer src="./prism.js"></script>
    <style>
        .code-container {
            position: relative;
        }

        pre {
            background-color: #f4f4f4;
            padding: 20px;
            border-radius: 5px;
        }

        .copy-button {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="code-container">
    <pre>
      <code class="language-javascript">
        // Your code goes here
        function greet(name) {
          console.log(`Hello, ${name}!`);
        }
      </code>
        <code class="language-html">
         <a-button>eee</a-button>
      </code>
    </pre>
    <button class="copy-button" onclick="copyCode()">Copy Code</button>
</div>

<script>
  function copyCode() {
    const codeElement = document.querySelector('pre code');
    const textToCopy = codeElement.innerText;

    const textarea = document.createElement('textarea');
    textarea.value = textToCopy;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);

    alert('Code copied to clipboard!');
  }
</script>
</body>
</html>
